<template>
  <div class="specialty">
    <div class="top_img_banner">
      <h2 class="title">连锁经营管理(专科)</h2>
      <p class="subtitle">2018秋季第二学期</p>
      <div class="claim">
        <div class="title_name">——   专业考核要求   ——</div>
        <div class="claim_text_body" :style="{height: (openText ? '2rem': (3 + 0.5*tableData.length)+'rem')}">
          您好，您已报读本专业，请按要求认真完成，让我们一起努力争取好成绩吧！
          <div class="tab_kc">
            <div class="tab_item">
              <strong>8</strong>
              <p>总学分</p>
            </div>
            <div class="tab_item">
              <strong>8</strong>
              <p>已修学分</p>
            </div>
            <div class="tab_item">
              <strong>8</strong>
              <p>最低毕业学分</p>
            </div>
          </div>
          <table class="table_list">
            <tr>
              <th>课程模块</th>
              <th>课程总数</th>
              <th>总学分</th>
              <th>已获得学分</th>
            </tr>
            <tr v-for="(item, index) in tableData" :key="item.name + index">
              <td>{{item.name}}</td>
              <td>{{item.number}}</td>
              <td>{{item.credit}}</td>
              <td>{{item.score}}</td>
            </tr>
          </table>
        </div>
        <a v-if="openText" href="javascript:;" @click="openText = false"><i class="iconfont icon-down2"></i></a>
        <a v-else href="javascript:;" @click="openText = true"><i class="iconfont icon-arrow-up"></i></a>
      </div>
    </div>
    <div class="progress_body">
      <div class="title_h2">第一学期</div>
      <div class="progress_item">
        <div class="tab_kc">
          <div class="tab_item">
            <strong>8</strong>
            <p>课程总数</p>
          </div>
          <div class="tab_item">
            <strong>8</strong>
            <p>已完成</p>
          </div>
          <div class="tab_item">
            <strong>8</strong>
            <p>学期总分数</p>
          </div>
          <div class="tab_item">
            <strong>8</strong>
            <p>已获取学分</p>
          </div>
        </div>
        <div class="round_list">
          <div class="round_item">
            <p class="title_name">课程教学</p>
            <div class="bottom_body">
              <p>完成率</p>
              <strong>90%</strong>
              <div class="round_right">
                <van-circle
                    v-model="currentRate"
                    color="#07c160"
                    size="55px"
                    layer-color="#F2F3F7"
                    :rate="90"
                    :speed="100"
                    :clockwise="false"
                    :stroke-width="60"
                />
              </div>
            </div>
          </div>
          <div class="round_item">
            <p class="title_name">课程教学</p>
            <div class="bottom_body">
              <p>直播课</p>
              <strong>90%</strong>
              <div class="round_right">
                <van-circle
                    v-model="currentRate"
                    color="#FA3A51"
                    size="55px"
                    layer-color="#F2F3F7"
                    :rate="90"
                    :speed="100"
                    :clockwise="false"
                    :stroke-width="60"
                />
              </div>
            </div>
          </div>
          <div class="round_item">
            <p class="title_name">课程教学</p>
            <div class="bottom_body">
              <p>课后作业</p>
              <strong>90%</strong>
              <div class="round_right">
                <van-circle
                    v-model="currentRate"
                    color="#07c160"
                    size="55px"
                    layer-color="#F2F3F7"
                    :rate="90"
                    :speed="100"
                    :clockwise="false"
                    :stroke-width="60"
                />
              </div>
            </div>
          </div>
          <div class="round_item">
            <p class="title_name">课程教学</p>
            <div class="bottom_body">
              <p>小组答疑</p>
              <strong>90%</strong>
              <div class="round_right">
                <van-circle
                    v-model="currentRate"
                    color="#07c160"
                    size="55px"
                    layer-color="#F2F3F7"
                    :rate="90"
                    :speed="100"
                    :clockwise="false"
                    :stroke-width="60"
                />
              </div>
            </div>
          </div>
        </div>
        <a href="javascript:;" class="open_detail">点击查看详情</a>
      </div>
      <div class="title_h2">第二学期</div>
      <div class="progress_item">
        <div class="tab_kc">
          <div class="tab_item">
            <strong>8</strong>
            <p>课程总数</p>
          </div>
          <div class="tab_item">
            <strong>8</strong>
            <p>已完成</p>
          </div>
          <div class="tab_item">
            <strong>8</strong>
            <p>学期总分数</p>
          </div>
          <div class="tab_item">
            <strong>8</strong>
            <p>已获取学分</p>
          </div>
        </div>
        <div class="round_list">
          <div class="round_item">
            <p class="title_name">课程教学</p>
            <div class="bottom_body">
              <p>完成率</p>
              <strong>90%</strong>
              <div class="round_right">
                <van-circle
                    v-model="currentRate"
                    color="#07c160"
                    size="55px"
                    layer-color="#F2F3F7"
                    :rate="90"
                    :speed="100"
                    :clockwise="false"
                    :stroke-width="60"
                />
              </div>
            </div>
          </div>
          <div class="round_item">
            <p class="title_name">课程教学</p>
            <div class="bottom_body">
              <p>直播课</p>
              <strong>90%</strong>
              <div class="round_right">
                <van-circle
                    v-model="currentRate"
                    color="#FA3A51"
                    size="55px"
                    layer-color="#F2F3F7"
                    :rate="90"
                    :speed="100"
                    :clockwise="false"
                    :stroke-width="60"
                />
              </div>
            </div>
          </div>
          <div class="round_item">
            <p class="title_name">课程教学</p>
            <div class="bottom_body">
              <p>课后作业</p>
              <strong>90%</strong>
              <div class="round_right">
                <van-circle
                    v-model="currentRate"
                    color="#07c160"
                    size="55px"
                    layer-color="#F2F3F7"
                    :rate="90"
                    :speed="100"
                    :clockwise="false"
                    :stroke-width="60"
                />
              </div>
            </div>
          </div>
          <div class="round_item">
            <p class="title_name">课程教学</p>
            <div class="bottom_body">
              <p>小组答疑</p>
              <strong>90%</strong>
              <div class="round_right">
                <van-circle
                    v-model="currentRate"
                    color="#07c160"
                    size="55px"
                    layer-color="#F2F3F7"
                    :rate="90"
                    :speed="100"
                    :clockwise="false"
                    :stroke-width="60"
                />
              </div>
            </div>
          </div>
        </div>
        <a href="javascript:;" class="open_detail">点击查看详情</a>
      </div>
      <div class="title_h2">第三学期</div>
      <div class="no_progress_item">
        未开启
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'specialty',
  components: {},
  data () {
    return {
      openText: true,
      currentRate: 70,
      tableData: [
        { name: '专业课程', number: 20, credit: 60, score: 30 },
        { name: '专业课程', number: 20, credit: 60, score: 30 },
        { name: '专业课程', number: 20, credit: 60, score: 30 },
        { name: '专业课程', number: 20, credit: 60, score: 30 },
        { name: '专业课程', number: 20, credit: 60, score: 30 }
      ]
    }
  },
  props: {},
  watch: {},
  methods: {},
  computed: {},
  created () {
  },
  mounted () {
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .specialty {
    .top_img_banner{
      padding: 50px 32px 80px;
      .title{
        font-size: 36px;
        color: #4A4A4A;
        letter-spacing: 0;
        text-align: center;
        font-family: PingFangSC-Semibold;
        margin: 15px 0;
      }
      .subtitle{
        font-size: 28px;
        color: #666666;
        letter-spacing: 0;
        text-align: center;
        font-family: PingFangSC-Semibold;
        margin: 15px 0 50px;
      }
      .claim{
        background-color: #F6FAFF;
        box-shadow: 0 2px 15px 0 rgba(0,0,0,0.10);
        padding: 30px;
        position: relative;
        .title_name{
          font-family: PingFangSC-Medium;
          font-size: 28px;
          color: #1F93FD;
          letter-spacing: 0;
          text-align: center;
          margin-bottom: 30px;
        }
        .claim_text_body{
          font-family: PingFangSC-Regular;
          font-size: 26px;
          color: #666666;
          line-height: 37px;
          -webkit-transition: all 0.6s;
          -moz-transition: all 0.6s;
          -ms-transition: all 0.6s;
          -o-transition: all 0.6s;
          transition: all 0.6s;
          height: 80px;
          overflow: hidden;
          .table_list{
            width: 100%;
            th{
              font-family: PingFangSC-Regular;
              font-size: 22px;
              color: #666666;
              letter-spacing: 0;
              text-align: center;
              font-weight: normal;
            }
            tr{
              line-height: 40px;
              th{
                &:nth-child(1) {
                  text-align: left;
                }
              }
              td{
                text-align: center;
                font-size: 24px;
                color: #666666;
                &:nth-child(1){
                  font-size: 22px;
                  color: #222222;
                  text-align: left;
                }
                &:nth-child(4){
                  color: #027FFE;
                }
              }
            }
          }
          .tab_kc{
            display: flex;
            align-content: center;
            margin: 10px 0;
            padding: 30px 0;
            border-bottom: 1px dashed #C8C8C8;
            .tab_item{
              flex: 1;
              text-align: center;
              strong{
                font-size: 64px;
                color: #1F93FD;
                letter-spacing: 0;
                display: block;
              }
              p{
                font-size: 22px;
                color: #666666;
                letter-spacing: 0;
                margin: 10px 0;
              }
            }
          }
        }
        a{
          position: absolute;
          width: 150px;
          height: 60px;
          bottom: -60px;
          left: 50%;
          text-align: center;
          transform: translate(-50%, -50%);
          border-radius: 100%;
          background-color: #F6FAFF;
          box-shadow: 0 8px 10px 0 rgba(0,0,0,0.06);
          line-height: 30px;
          -webkit-transition: all 0.6s;
          -moz-transition: all 0.6s;
          -ms-transition: all 0.6s;
          -o-transition: all 0.6s;
          transition: all 0.6s;
          i{
            font-size: 30px;
            color: #666666;
          }
        }
      }
    }
    .progress_body{
      padding: 0 32px;
      .title_h2{
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #222222;
        letter-spacing: 0;
        font-weight: bold;
        border-left: 7px solid #1F93FD;
        padding-left: 15px;
        margin: 30px 0;
      }
      .progress_item{
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.10);
        background-color: #FFFFFF;
        padding: 20px;
        margin-bottom: 60px;
        .tab_kc{
          display: flex;
          align-content: center;
          margin: 10px 0;
          padding: 30px 0;
          border-bottom: 2px dashed #C8C8C8;
          .tab_item{
            flex: 1;
            text-align: center;
            strong{
              font-size: 52px;
              color: #1F93FD;
              letter-spacing: 0;
              display: block;
            }
            p{
              font-size: 22px;
              color: #666666;
              letter-spacing: 0;
              margin: 10px 0;
            }
          }
        }
      }
      .no_progress_item{
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.10);
        background-color: #FFFFFF;
        font-size: 40px;
        color: #E5E5E5;
        height: 216px;
        margin-bottom: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .round_list{
        display: flex;
        flex-wrap: wrap;
        .round_item{
          width: 50%;
          padding: 15px 30px;
          .title_name{
            font-size: 28px;
            color: #222222;
            letter-spacing: 0;
          }
          .bottom_body{
            position: relative;
            p{
              font-size: 22px;
              color: #999999;
              margin: 15px 0;
            }
            strong{
              font-size: 52px;
              color: #1F93FD;
              display: block;
            }
            .round_right{
              position: absolute;
              left: 160px;
              top: 0;
              font-size: 24px;
            }
          }
        }
      }
    }
    .open_detail{
      display: block;
      font-size: 26px;
      color: #666666;
      letter-spacing: 0;
      text-align: center;
      margin: 30px 0 0;
    }
  }
</style>
